动态地图加载api 4.x

留言

感觉3和4还是有较大改变的。从esri官方例子上看来，4的功能更加丰富，在大数据的展示和操作上体验比3要好。 4.12为例

1. 不同

  1. API调用

    1
    2
    3
    4
    5
    6
    //API 3.x ：
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
    <script src="https://js.arcgis.com/3.28/">
    //API 4.x ：
    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
       <script src="https://js.arcgis.com/4.12/">

  2. 动态图层的引用模块

    1
    2
    3
    4
    5
    6
    //API 3.x ：
    "esri/map",
    “esri/layers/ArcGISDynamicMapServiceLayer”，
    //API 4.x ：
    "esri/Map",
    “esri/views/MapView”

    “map”改为了”Map”
    显而易见从layers目录下到，到了views下，说明，地图需要放置在views中，既然多了一层，那这个views层必然是为我们封装了很多的方法和接口。

  3. 创建Map对象不在需要绑定id

    1
    2
    3
    4
    //API 3.x ：
    var map = new Map("mapDiv");
    //API 4.x ：
    var map = new Map();

  4. 图层的创建

    1
    2
    3
    4
    var layer = new MapImageLayer({
    	url:"http://192.168.3.1:6080/arcgis/rest/services/gaofen/xianghe/MapServer",
    	sublayers: [{id: 0,visible:true}]
    });

    一般为两个参数，url 和 sublayers

    • url 为 REST URL
    • sublayers 设置图层可见性 比3更加方便

  5. 创建MapView，需要选择容器中的 map 和绑定的 DIV 的 id

    1
    2
    3
    4
    new MapView({
    	map: map,
    	container: "viewDiv"
    });

    2. api 3.x 代码

    3. api 4.x 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
    <script src="https://js.arcgis.com/4.12/"></script>


    <script type="text/javascript">
        require(["esri/Map",
                "esri/layers/MapImageLayer",
                "esri/views/MapView",
                "dojo/domReady!"],
            function (Map, MapImageLayer, MapView) {
                var map = new Map();
                var layer = new MapImageLayer({
                    url:"http://192.168.3.1:6080/arcgis/rest/services/gaofen/xianghe/MapServer",

                });
                map.add(layer);
                new MapView({
                    map: map,
                    container: "viewDiv"
                });


            });
    </script>
</head>

<body>
<div id="viewDiv" style="height:800px;"></div>
</body>
</html>